<script setup>
import { ref } from 'vue'
import { useField } from 'vee-validate'
import otherLogin from './otherLogin.vue'
import {isRequiredAccount,isRequiredSms} from '../validation';
import { smsLoginSend } from '@/api/login'
// const phoneRegExp =
//   /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/
// const smsRegExp = /^\d{6}$/
const checkbox = ref(false)
const s = ref('发送验证码')
const disabled = ref(false)

const emits = defineEmits(['update:flag'])

// const isRequiredAccount = (value) => {
//   if (value && phoneRegExp.test(value)) {
//     return true
//   }

//   return '手机格式错误'
// }
// const isRequiredSms = (value) => {
//   if (value && smsRegExp.test(value)) {
//     return true
//   }

//   return '验证码格式错误'
// }

const { value: accountValue, errorMessage: errorAccount } = useField('fieldName', isRequiredAccount)
const { value: smsValue, errorMessage: errorSms } = useField('fieldName', isRequiredSms)
const account = ref(accountValue)
const sms = ref(smsValue)

const passwordLonin = () => {
  emits('update:flag', true)
}



const sendSms = () => {
  if (!account.value) return ElMessage.error('请填写手机号')
  if (errorAccount.value) return ElMessage.error('手机号码格式错误')
  if (!disabled.value) {
    disabled.value = true
    s.value = 60
    let time = setInterval(() => {
      s.value = s.value -= 1
      if (s.value == 0) {
        clearInterval(time)
        time = null
        s.value = '发送验证码'
        disabled.value = false
      }
    }, 1000)

    smsLoginSend({mobile: account.value,type: 'register' }).then(res => {
      console.log(res);
    })

  }
}

const login = () => {
   if (!account.value) return ElMessage.error('请填写手机号')
   if (errorAccount.value) return ElMessage.error('手机号码格式错误')
   if (!sms.value) return ElMessage.error('请填写验证码')
    if (errorSms.value) return ElMessage.error('验证码格式错误')
    if(!checkbox.value) return ElMessage.error('请勾选条款协议')
}
</script>

<template>
  <div class="sms-login-view">
    <p class="password-login" @click="passwordLonin">密码登录</p>
    <el-input
      v-model.number="account"
      class="w-50 m-2"
      type="number"
      :clearable="true"
      placeholder="请输入用户名称/手机号码"
    >
      <template #prefix>
        <i class="iconfont icon-jurassic_user"></i>
      </template>
    </el-input>
    <div class="err-info">{{ errorAccount }}</div>
    <el-input
      v-model="sms"
      class="w-50 m-2"
      type="number"
      :clearable="true"
      placeholder="输入验证码"
    >
      <template #prefix>
        <i class="iconfont icon-duanxin"></i>
      </template>
      <template #suffix>
        <div
          class="send-sms"
          :style="{ backgroundColor: !disabled && account  && !errorAccount ? '#1abc9c' : '#bcf1e5' }"
          @click="sendSms"
        >
          {{ s }}
        </div>
      </template>
    </el-input>
    <div class="err-info">{{ errorSms }}</div>
    <p class="terms-checkbox">
      <el-checkbox v-model="checkbox" label="同意" size="large"
        >我已同意《隐私条款》和《服务条款》</el-checkbox
      >
    </p>
    <div class="login-btn" @click="login" :style="{backgroundColor: account && sms && checkbox && !errorAccount && !errorSms ? '#1abc9c' : '#bcf1e5'}">登录</div>
    <div class="btns-reg-pass">
      <span>遇到问题</span>
      <span><router-link to="/registeredAndLogin/registered">免费注册</router-link></span>
    </div>
    <other-login></other-login>
  </div>
</template>

<style lang="scss">
.sms-login-view {
  .password-login {
    text-align: right;
    color: #1abc9c;
    margin-bottom: 10px;
    cursor: pointer;
  }

  input {
    height: 50px;
    outline: none;
  }

  .el-input__wrapper.is-focus {
    box-shadow: rgb(220, 223, 230) 0px 0px 0px 1px inset;
  }

  .el-input__wrapper {
    border-radius: 0;
    // border
  }

  .send-sms {
    // border: 1px solid #999;
    font-size: 12px;
    padding: 0 4px;
    cursor: pointer;
    width: 70px;
    text-align: center;
    color: #fff;
  }

  .err-info {
    height: 20px;
    line-height: 20px;
    color: red;
  }

  .terms-checkbox {
    .el-checkbox__label {
      font-size: 12px;
    }
  }

  .login-btn {
    width: 100%;
    height: 50px;
    background-color: #1abc9c;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    margin: 10px 0;
  }

  .btns-reg-pass {
    display: flex;
    justify-content: space-between;
  }
}
</style>
